<script lang="ts" setup>
import { ref, Ref } from 'vue'
const bgImg = "https://shq.qdjqy.cn/profile/0911/suggest/bg.png"
const iconBg = "https://shq.qdjqy.cn/profile/0911/suggest/icon_bag.png"

definePage({
  style: {
    navigationStyle: 'custom'
  },
})

function handleClickLeft() {
  uni.navigateBack({
    delta: 1
  })
}

import { useToast } from 'wot-design-uni'
const { success: showSuccess } = useToast()

const model = reactive<{ title: string, content: string, fileList: Record<string, string>[] }>({
  title: '',
  content: '',
  fileList: []
})

const form = ref()
function handleSubmit() {
  form.value
    .validate()
    .then(({ valid, errors }) => {
      if (valid) {
        showSuccess({
          msg: '反馈成功'
        })
        handleClickLeft()
      }
    })
    .catch((error) => {
      console.log(error, 'error')
    })
}

function handleFileChange({ fileList }) {
  model.fileList = fileList
}
import { isArray } from 'wot-design-uni/components/common/util'
const validate = (value) => {
  if (isArray(value) && value.length) {
    return Promise.resolve()
  } else {
    return Promise.reject()
  }
} 
</script>

<template>
  <view class="suggest-container">
    <image class="bg-img" :src="bgImg" mode="widthFix" />
    <wd-navbar left-text="意见反馈" left-arrow @click-left="handleClickLeft" 
      custom-style="background-color: transparent !important;" safeAreaInsetTop></wd-navbar>
    
    <view class="text-img">
      <image :src="iconBg" mode="aspectFit"></image>
      <view class="text">
        <view>请填写您要反馈的内容</view>
        <view>我们将在7个工作日内给您回复</view>
      </view>
    </view>

    <wd-form ref="form" :model="model" class="wdform" style="margin-top: 500px;">
      <wd-cell-group border>
        <wd-input
          label="标题"
          label-width="100px"
          prop="title"
          clearable
          v-model="model.title"
          placeholder="请输入标题"
          :rules="[{ required: true, message: '请填写标题' }]"
        />
        <wd-textarea
          label="正文"
          label-width="100px"
          prop="content"
          clearable
          :maxlength="300"
          show-word-limit
          v-model="model.content"
          placeholder="请输入正文"
          type="textarea"
          :rules="[{ required: true, message: '请填写正文' }]"
        />
         <wd-cell title="图片" title-width="100px" prop="fileList" :rules="[{ required: true, message: '请上传图片',
      validator: validate}]">
            <wd-upload :file-list="model.fileList" action="https://ftf.jd.com/api/uploadImg" @change="handleFileChange"></wd-upload>
          </wd-cell>
      </wd-cell-group>
      <view class="footer">
        <wd-button type="primary" size="large" @click="handleSubmit" block>提交</wd-button>
      </view>
    </wd-form>
    <wd-toast />
  </view>
</template>

<style lang="scss" scoped>
.suggest-container {
  & .bg-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 750rpx;
    height: 380rpx;
    z-index: -1; 
    vertical-align: top;
  }
  .nav {
    margin-top: 20rpx;
  }
  .text-img {
    margin: 20rpx 50rpx;
    width: 650rpx;
    height: 180rpx;
    position: relative;
    image {
      width: 100%;
      height: 100%;
      position: absolute;
      z-index: 0;
    }
    .text {
      position: relative;
      top: 50rpx;
      left: 160rpx;
      z-index: 1;
      color: #333;
      font-size: 30rpx;
      font-weight: 600;
      line-height: 46rpx;
    }
  }
  .wdform {}
}
.footer {
  padding: 12px;
}
</style>
